<template>
  <div class="container">
    <div class="pic-box">
      <img :src="img" alt="">
    </div>
    <div class="form-box">
      <form action="" @submit.prevent="onLogin">
        <p>
          <input type="number" placeholder="请输入您的手机号" v-model="formObj.phone">
        </p>
        <p class="code-box">
          <input type="number" placeholder="请输入短信验证码" class="code" v-model="formObj.code">
          <input type="button" value="获取验证码" class="getcode">
        </p>
        <p class="check-box">
          <input type="checkbox" name="" id="" class="check" v-model="formObj.check">
          <span>我已阅读并同意上医月嫂相关协议</span>
        </p>
        <p class="login-box">
          <input type="submit" value="登录" class="login">
          <input type="button" value="游客体验" @click="onHome" />
        </p>

      </form>
    </div>


  </div>
</template>
<script>
  import {
    Toast
  } from "mint-ui";
  export default {
    data() {
      return {
        formObj: {
          phone: "",
          code: "",
          check: ""
        },
        img: "/images/img_01.png"
      };
    },
    created() {},
    methods: {
      onLogin(e) {
        console.log(e);
        //获取手机号
        var aa = this.formObj.phone;
        var code = this.formObj.code;
        var checked = this.formObj.check;
        console.log(aa);
        if (!aa) {
          Toast("手机号不能为空!");
        } else if (!code) {
          Toast("验证码不能为空!");
        } else if (!checked) {
          Toast("未选中");
        } else {
          alert("登录成功");
          this.formObj.phone = this.formObj.code = "";
          this.formObj.check = false;
        }
      },
      onHome() {
        this.$router.push("/home");
      }
    }
  };
</script>
<style scoped>
  .wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(#7fffaa, #e6e6fa);
  }

  .pic-box {
    text-align: center;
    margin-top: 50px;
  }

  .pic-box img {
    /* width: 50%; */
  }

  .form-box {
    padding: 10px;
    margin-top: 50px;
  }

  form input {
    height: 50px;
  }

  form .check {
    width: 20px;
    height: 20px;
    margin-left: 30px;
    margin-right: 5px;
  }

  .form-box .code-box {
    display: flex;
  }

  .form-box .code-box .code {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }

  .form-box .code-box .getcode {
    flex: 1;
    height: 50px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    background-color: #caded4;
  }

  form .check-box {
    display: flex;
    align-items: center;
  }

  .login-box {
    margin-top: 20px;
  }

  .login-box input {
    width: 100%;
  }

  .login-box .login {
    margin-bottom: 10px;
  }
</style>